<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p ref="testMsg">{{msg}}</p>
        <div ref="testDOM">testDOM</div>
        <button @click="btn">方法</button>
        <button @click="del">销毁</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                msg:'土土的金箍棒！！'
            },
            methods: {
                btn(){
                    console.log('111');
                    this.msg = '海广旭的金箍棒，专用打图图'
                },
                del(){
                    this.$destroy();
                }
            },
            /* el（DOM） 数据  methods 。。。 */
            // data methods...都不能用，初始化都没有完成
            beforeCreate() {
                console.log('创建前');
                console.log(this.$refs.testDOM);//如果能得到该DOM，意味可以操作DOM
                console.log(this.msg)//如果能得到msg  数据初始化完成可以使用
                console.log(this.btn)//如果能得到msg  方法初始化完成
            },
            // 数据 方法 初始化完成  不能操作DOM
            created() {
                console.log('创建')
                console.log(this.$refs.testDOM);//如果能得到该DOM，意味可以操作DOM
                console.log(this.msg)//如果能得到msg  数据初始化完成可以使用
                console.log(this.btn)//如果能得到msg  方法初始化完成
            },
            // 不能操作DOM
            beforeMount() {
                console.log('挂载前')
                console.log(this.$refs.testDOM);//如果能得到该DOM，意味可以操作DOM
                console.log(this.msg)//如果能得到msg  数据初始化完成可以使用
                console.log(this.btn)//如果能得到msg  方法初始化完成
            },
            // 最早能操作DOM的钩子函数
            mounted() {
                console.log('挂载')
                console.log(this.$refs.testDOM);//如果能得到该DOM，意味可以操作DOM
                console.log(this.msg)//如果能得到msg  数据初始化完成可以使用
                console.log(this.btn)//如果能得到msg  方法初始化完成
            },
            beforeUpdate() {
                // 更新前view是旧值 但是data中的数据为新值
                console.log('更改前')
                console.log(this.$refs.testMsg);
                console.log(this.msg);
                debugger

            },
            updated() {
                // 更新后都为新值
                console.log('更改后')
                console.log(this.$refs.testMsg);
            },
            beforeDestroy() {
                console.log('销毁前');
                // 销毁前做一些收尾工作  清除定时器  解除一些绑定的事件
            },
            destroyed() {
                console.log('销毁')
            },
        })
        console.log(vm.$el);
    </script>
</body>
</html>